<html>
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            html{
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
                background-color:rgb(2,173,230);
                }
            
            #circle{
                position:absolute;
                height:100;
                width:100;
                background-color: white;
                border-top-right-radius: 20%;
                overflow: hidden;
                top:100;
                left:100;
                border:1px solid black;
            }
            #cire{
                /* border-radius : 0vw 0vw 0vw 25vw; */
                height:1000;
                width:1000;
                background-color: transparent;
                position: absolute;
                left:80;
                top:-980;
                cursor:move;
                border:1px solid black;
            }
            #words{
                position: absolute;
                top:950;
            }
        </style>
    </head>
    
    <body ondragstart="return false;" onmousemove="mm(event)" onmousedown="isdown = true;" onmouseup ="isdown = false;">
        <span id="mo" style="color:white">看到下面这张纸了吗，拖动它的折角，里面是我想说的话(请使用电脑打开本网页）</span>
        <div id="circle" >
            <div id="cire" onmousedown="md(event);">
                <div id="words">我爱你<br>你爱我吗</div>
            </div>
        </div>
    </body>
    <script>
        var isdown = false;
        var downs =null;
        var oduc = document.getElementById("circle")
        var docu = document.getElementById("cire");
        var x = 80;
        var y = -980;
        // document.getElementById("mo").innerHTML = window.innererWidth;
        function md(e){
            downs = [e.pageX-x,e.pageY-y];
        }
        function mm(e){
            if(isdown && downs){
                oduc.style.borderTopRightRadius = 100-Math.min(x,-y-900) + "%";
                docu.style.top=y=Math.min(e.pageY-downs[1],-900);
                docu.style.left=x=Math.max(e.pageX-downs[0],0);
                }
        }

        function frush(){
                //alert(1);
            window.location.replace("http://192.168.2.101/yzw_spawner/XMWF/draw.html");
            }
        // setTimeout("frush()",4000);
    </script>
</html>